{% extends 'common/base.html' %}
{% load staticfiles %}

{% block head_js %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
        $(function () {
            goods_idList = $('#order_btn').attr('good_list');
            csrf_value = $('input[name="csrfmiddlewaretoken"]').val();

            $('.order_submit').click(function () {
                // 必须在点击后进行判断
                pay_way = $('input[name="pay_style"]:checked').val();
                $.post('{% url 'order:balance_order' %}',
                        {'idList': goods_idList, 'csrfmiddlewaretoken':csrf_value, 'pay_way':pay_way},
                        function (data) {
                            if(data['ret'])
                                window.location.href='{% url 'users:order' %}';
                        })
            })
        })

    </script>

{% endblock head_js %}

{% block body %}

    {% include 'common/status.html' %}


	<div class="search_bar clearfix">
        {% include 'common/logo.html' %}
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>		
	</div>
	
	<h3 class="common_title">确认收货地址</h3>

	<div class="common_list_con clearfix">
		<dl>
			<dt>寄送到：</dt>
			<dd><input type="radio" name="" checked="">{{ user.user_recv }} （{{ user.user_name }} 收） {{ user.user_tele }}</dd>
		</dl>
        {# target的作用就是如何打开一个新的连接,该连接为新标签中打开 #}
		<a target="_blank" href="{% url 'users:site' %}" class="edit_site">编辑收货地址</a>

	</div>
	{% csrf_token %}
	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input type="radio" value="1" name="pay_style" checked>
			<label class="cash">货到付款</label>
			<input type="radio" value="2" name="pay_style">
			<label class="weixin">微信支付</label>
			<input type="radio" value="3" name="pay_style">
			<label class="zhifubao"></label>
			<input type="radio" value="4" name="pay_style">
			<label class="bank">银行卡支付</label>
		</div>
	</div>

	<h3 class="common_title">商品列表</h3>
	
	<div class="common_list_con clearfix">
		<ul class="goods_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>		
		</ul>

        {% for goods in cart_goods %}
		<ul class="goods_list_td clearfix">
			<li class="col01">{{ forloop.counter }}</li>
			<li class="col02"><img src="{% static goods.cart_goods.good_image %}"></li>
			<li class="col03">{{ goods.cart_goods.good_name }}</li>
			<li class="col04">{{ goods.cart_goods.good_unit }}</li>
			<li class="col05">{{ goods.cart_goods.good_price }}元</li>
			<li class="col06">{{ goods.cart_amount }}</li>
			<li class="col07">{{ goods.single_total_money }}元</li>
		</ul>
        {% endfor %}


	</div>

	<h3 class="common_title">总金额结算</h3>

	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_goods_count">共<em>{{ cart_goods.total_num }}</em>件商品，总金额<b>{{ cart_goods.total_money }}元</b></div>
			<div class="transit">运费：<b>10元</b></div>
			<div class="total_pay">实付款：<b>{{ cart_goods.total_money_and_freight }}元</b></div>
		</div>
	</div>

    {% csrf_token %}

	<div class="order_submit clearfix">
		<a href="javascript:;" good_list='{{ goods_id_list }}' id="order_btn">提交订单</a>
	</div>	


    {% block end_js %}
	<div class="popup_con">
		<div class="popup">
			<p>订单提交成功！</p>
		</div>
		
		<div class="mask"></div>
	</div>
	<script type="text/javascript" src="{% static "js/jquery-1.12.2.js" %}"></script>
	<script type="text/javascript">
		$('#order_btn').click(function() {
			localStorage.setItem('order_finish',2);

			$('.popup_con').fadeIn('fast', function() {

				setTimeout(function(){
					$('.popup_con').fadeOut('fast',function(){
						window.location.href = '{% url 'users:order' %}';
					});	
				},3000)
			});
		});
	</script>
    {% endblock end_js %}

{% endblock body %}
